<script setup lang="ts">
import { useEcharts } from "@/hooks/useEchartsDatav";
import { reactive } from "vue";

const props = withDefaults(
  defineProps<{
    width?: string;
    height?: string;
    theme?: string;
    bgColor?: string;
    title?: string;
    subtitle?: string;
    data?: number[]; // 曲线数据
    xAxisData?: string[]; // x轴数据
  }>(),
  {
    width: "100%",
    height: "250px",
    data: () => [],
  }
);

// 柱状图选项
const option = reactive({
  backgroundColor: "transparent",
  title: {
    text: props.title,
    subtext: props.subtitle,
    x: "left",
    textStyle: {
      color: "#fff",
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    left: "10%",
    top: "10%",
    right: "4%",
    bottom: "10%",
  },
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: ["50%", "70%"],
      label: {
        fontWeight: "bold",
        color: "#fff"
      },
      data: [
        { value: 1048, name: "微信" },
        { value: 735, name: "支付宝" },
        { value: 580, name: "其他" },
        { value: 484, name: "POS" },
        { value: 300, name: "转账" },
      ],
    },
  ],
});

const { chartRef } = useEcharts({ props, option });
</script>

<template>
  <div
    ref="chartRef"
    :style="{ width: props.width, height: props.height }"
  ></div>
</template>

<style scoped></style>
